
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉菜单</title>
		<style>
			*{
				/**box-sizing: 定义如何计算一个元素的总宽度和总高度;
				1.content-box：宽高不包括内外边距      默认的
				2.border-box：宽高包括内外边距
				*/
				/* 并排放置两个带边框的框 */
				box-sizing: border-box;/*可以避免因为内边距和边框的设置导致元素超出预期*/
			}
			ul{
				list-style-type: none;/* 去掉列表数字前的圆点或数字 */
				margin: 0;
				padding: 0;
				overflow: hidden;
				background-color: #333;
			}
			/* 为每个链接设置样式 */
			.lianjie{
				display: inline-block;/*ul的样式*/
				color: white;
				text-align: center;
				padding: 14px 16px;
				text-decoration: none;
			}
			/* 鼠标放置链接时改变样式 */
			.lianjie:hover{
				background-color: #111;
				color: red;
			}
			.dropdown{
				display: inline-block;
			}
			/* 下拉菜单设置样式 */
			.dropdown-content{
				/* 隐藏菜单 */
				display: none;
				position: absolute;
				background-color: white;
				/* 设置元素的最小宽度 */
				min-width: 160px;/*设置元素最小宽度，防止表单因小屏过度挤压导致输入框和标签重叠混乱*/
				box-shadow: 0px 8px 16px 0px rgba(12, 12, 12, .2);/*给元素添加阴影效果，0.2透明度*/
				overflow: auto;
			}
			.dropdown-content a{/*为下拉内容设置样式*/
				display: block;
				color: black;
				padding: 12px 16px;
				text-decoration: none;
			}
			.dropdown-content a:hover{
				background-color: #f1f1f1;
			}
			.dropdown:hover .dropdown-content{/*鼠标悬停时显示下拉内容*/
				display: block;
			}
		</style>
	</head>
	<body>
		<ul>
			<div class="dropdown">
				<a href="#" class="lianjie">Xiaomi</a>
				<div class="dropdown-content">
					<a href="#">Xiaomi13</a>
					<a href="#">Xiaomi14</a>
					<a href="#">Xiaomi15</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">家电</a>
				<div class="dropdown-content">
					<a href="#">冰箱</a>
					<a href="#">电视</a>
					<a href="#">音箱</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">课程</a>
				<div class="dropdown-content">
					<a href="#">JavaScript</a>
					<a href="#">C语言</a>
					<a href="#">Python</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">小吃</a>
				<div class="dropdown-content">
					<a href="#">冰淇淋</a>
					<a href="#">臭豆腐</a>
					<a href="#">烧烤</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">app</a>
				<div class="dropdown-content">
					<a href="#">微信</a>
					<a href="#">qq</a>
					<a href="#">抖音</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">电脑</a>
				<div class="dropdown-content">
					<a href="#">惠普</a>
					<a href="#">华硕</a>
					<a href="#">小米</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">手机</a>
				<div class="dropdown-content">
					<a href="#">oppo</a>
					<a href="#">vivo</a>
					<a href="#">iphone</a>
				</div>
			</div>
			<div class="dropdown">
				<a href="#" class="lianjie">熊出没</a>
				<div class="dropdown-content">
					<a href="#">熊大</a>
					<a href="#">蹦蹦</a>
					<a href="#">光头强</a>
				</div>
			</div>
		</ul>
	</body>
</html>
